<template>
  <div id="s">
    <!-- 车辆基础信息-->
    <div class="titleOne" >
      <div class="titleTwo" ><i class="el-icon-s-data" >车辆信息</i></div>
    </div>
    <!--基础数据-->
    <el-form label-width="auto" :inline="true" :model="car" class="demo-form-inline">
      <!--      栏栅左右间隔-->
      <el-row :gutter="1">
        <!--        长默认24-->
        <el-col :span="8"><div class="grid-content bg-purple">
          <el-form-item label="车牌号">
            <el-input v-model="car.number" disabled></el-input>
          </el-form-item>
          <el-form-item label="车辆类型">
            <el-input v-model="car.type" disabled></el-input>
          </el-form-item>
          <el-form-item label="车辆状态">
            <el-input v-model="car.carStatus" disabled></el-input>
          </el-form-item>
          <el-form-item label="司机姓名">
            <el-input v-model="car.anotherOne" disabled></el-input>
          </el-form-item>
        </div></el-col>
        <el-col :span="8"><div class="grid-content bg-purple">
          <el-form-item label="车辆长度">
            <el-input v-model="car.length" disabled></el-input>
          </el-form-item>
          <el-form-item label="车辆宽度">
            <el-input v-model="car.width" disabled></el-input>
          </el-form-item>
          <el-form-item label="车辆高度">
            <el-input v-model="car.height" disabled></el-input>
          </el-form-item>
          <el-form-item label="车辆载重">
            <el-input v-model="car.carLoad" disabled></el-input>
          </el-form-item>
        </div></el-col>
        <el-col :span="8"><div class="grid-content bg-purple">
          <el-form-item label="车辆容积">
            <el-input v-model="car.volume" disabled></el-input>
          </el-form-item>
          <el-form-item label="车辆备注">
            <el-input v-model="car.mark" disabled></el-input>
          </el-form-item>
          <el-form-item label="创建时间">
            <el-input v-model="car.createTime" disabled></el-input>
          </el-form-item>
          <el-form-item label="修改时间">
            <el-input v-model="car.modifyTime" disabled></el-input>
          </el-form-item>
        </div></el-col>
      </el-row>
    </el-form>

    <!--    显示图片-->
    <div class="titleOne" >
      <div class="titleTwo" ><i class="el-icon-camera-solid" >车辆照片</i></div>
    </div>
    <el-row type="flex" class="row-bg" justify="space-around">

      <el-col :span="3" v-for="ele in src">
        <div class="grid-content bg-purple-light">
          <el-image  :src="ele"
                     style="width: 250px; height: 200px"
                     :preview-src-list="src"
                     :fit="'cover'">
          </el-image>
        </div>
      </el-col>

    </el-row>
    <!--    司机信息-->
    <div class="titleOne" >
      <div class="titleTwo" ><i class="el-icon-camera-solid" >司机信息</i></div>
    </div>
    <el-row v-if="!seenDriver" :gutter="0">
      <el-col :span="24"><div class="grid-content bg-purple">
        <span >暂无信息</span>
      </div></el-col>
    </el-row>
    <!--    司机基础信息表格-->
    <el-form label-width="auto" v-if="seenDriver" :inline="true" :model="driver" class="demo-form-inline">

      <el-row :gutter="1">
        <!--        长默认24-->
        <el-col :span="8"><div class="grid-content bg-purple">
          <el-form-item label="姓名">
            <el-input v-model="driver.driverName" disabled></el-input>
          </el-form-item>
          <el-form-item label="身份证">
            <el-input v-model="driver.driverId" disabled></el-input>
          </el-form-item>
          <el-form-item label="性别">
            <el-input v-model="driver.sex" disabled></el-input>
          </el-form-item>
        </div></el-col>
        <el-col :span="8"><div class="grid-content bg-purple">
          <el-form-item label="状态">
            <el-input v-model="driver.status==='1'?'已配车':'未配车'" disabled></el-input>
          </el-form-item>
          <el-form-item label="联系电话">
            <el-input v-model="driver.driverTel" disabled></el-input>
          </el-form-item>
          <el-form-item label="紧急联系人电话">
            <el-input v-model="driver.contactTel" disabled></el-input>
          </el-form-item>
        </div></el-col>
        <el-col :span="8"><div class="grid-content bg-purple">
          <el-form-item label="创建时间">
            <el-input v-model="driver.createTime" disabled></el-input>
          </el-form-item>
          <el-form-item label="修改时间">
            <el-input v-model="driver.modifyTime" disabled></el-input>
          </el-form-item>
          <el-form-item label="归属公司">
            <el-input v-model="driver.driverCompany" disabled></el-input>
          </el-form-item>
        </div></el-col>
      </el-row>

    </el-form>

    <!--  运输记录-->
    <div class="titleOne" >
      <div class="titleTwo" ><i class="el-icon-s-data" >运输记录</i></div>
    </div>
    <el-row v-if="!seenDispatch" :gutter="0">
      <el-col :span="24"><div class="grid-content bg-purple">
        <span >暂无</span>
      </div></el-col>
    </el-row>
    <!--  调度单记录数据-->
    <el-table v-if="seenDispatch" :default-sort="{prop: 'ticketId', order: 'ascending'}" :data="tableData" stripe
              style="width: 100%" :header-cell-style="{background:'#f7f7f7', color:'#666666'}">
      <el-table-column
        label="序号"
        type="index"
        :index="indexAdd"
        width="50"
        align="center">

      </el-table-column>

      <el-table-column
        prop="ticketId"
        label="调度单号"
        sortable
        width="180">
      </el-table-column>
      <el-table-column
        prop="status"
        label="调度单状态">
      </el-table-column>

      <el-table-column
        prop="startAreaName"
        sortable
        label="起点">
      </el-table-column>


      <el-table-column
        prop="endAreaName"
        label="终点">
      </el-table-column>
      <el-table-column
        prop="orderFormList.length"
        label="委托订单数量">
        <template v-slot="scope" >
          <el-button :disabled="scope.row.orderFormList === undefined" @click="getOrdersToShow(scope.row)" type="text" size="small">{{ scope.row.orderFormList === undefined ? 0 : scope.row.orderFormList.length }}</el-button>

        </template>
      </el-table-column>

      <el-table-column
        label="操作"
        width="100">
        <template v-slot="scope">
          <el-button @click="dispatchDetail(scope.row)" type="text" size="small">调度单详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--  运输记录分页-->
    <el-pagination
      v-if="seenDispatch"
      @size-change="getDispatch"
      @current-change="getDispatch"
      :current-page.sync="queryForm.pageNum"
      :page-sizes="[5, 10, 15, 20, 60, 80, 100]"
      :page-size.sync="queryForm.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    <!--    委托订单详情-->
    <el-dialog
      title="订单明细"
      :visible.sync="showOrder" width="60%">
      <!--  表格-->
      <el-table v-fit-columns :data="tableDataForOrders" stripe style="width: 100%" :header-cell-style="{background:'#f7f7f7', color:'#209e91'}"    ref="multipleTable">

        <el-table-column
          label="序号"
          width="50"
          type="index"
          :index="indexOrders"
        >
        </el-table-column>
        <el-table-column
          prop="orderId"
          label="委托单编号"
          sortable
          width="180">
          <template v-slot="scope" >
            <el-button  @click="jumpOrder(scope.row)" type="text" size="small">{{ scope.row.orderId }}</el-button>
          </template>
        </el-table-column>
        <el-table-column
          prop="customer.customerNameShort"
          label="委托客户"
          width="180">
        </el-table-column>
        <el-table-column
          prop="transportType"
          label="订单类型"
          width="100">
        </el-table-column>
        <el-table-column
          prop="weight"
          label="重量(KG)"
          width="100">
        </el-table-column>

        <el-table-column
          prop="consignorName"
          label="发货人"
          width="100">
        </el-table-column>
        <el-table-column
          prop="consignorCity.mergerName"
          label="发货地址"
          width="180">
        </el-table-column>
        <el-table-column
          prop="consigneeName"
          label="收货人"
          width="100">
        </el-table-column>
        <el-table-column
          prop="consigneeCity.mergerName"
          label="收货地址"
          width="180">
        </el-table-column>

        <el-table-column
          prop="currentStatus"
          label="当前状态"
          width="100">
          <template slot-scope="scope">
            <div :style="{ color: scope.row.currentStatus=='已结算' ? '#82B03F' : (scope.row.currentStatus=='待调度' ? '#FF0000' :  '#FF9900') }">
              {{ scope.row.currentStatus }}
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!--  分页-->
      <div style="width: 65%;">
        <el-pagination
          @size-change="getOrderList"
          @current-change="getOrderList"
          :current-page.sync="queryFormToGetOrders.pageNum"
          :page-sizes="[5, 10, 15, 20, 60, 80, 100]"
          :page-size.sync="queryFormToGetOrders.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="orderTotal">
        </el-pagination>
      </div>


    </el-dialog>

    <!--  异常记录-->
    <div class="titleOne" >
      <div class="titleTwo" ><i class="el-icon-s-data" >异常记录</i></div>
    </div>
    <el-row v-if="!seenException" :gutter="0">
      <el-col :span="24"><div class="grid-content bg-purple">
        <span >暂无</span>
      </div></el-col>
    </el-row>
    <!--  异常记录数据-->
    <el-table v-if="seenException" :default-sort="{prop: 'aid', order: 'ascending'}" :data="tableDataForException" stripe
              style="width: 100%" :header-cell-style="{background:'#f7f7f7', color:'#666666'}">
      <el-table-column
        label="序号"
        type="index"
        :index="indexException"
        width="50"
        align="center">

      </el-table-column>

      <el-table-column
        prop="aid"
        label="异常单号"
        sortable
        width="180">
      </el-table-column>
      <el-table-column
        prop="ticketId"
        label="调度单号">
      </el-table-column>

      <el-table-column
        prop="dispatchTicket.carInfo.number"
        sortable
        label="车牌号">
      </el-table-column>
      <el-table-column
        prop="dispatchTicket.carInfo.anotherOne"
        sortable
        label="司机">
      </el-table-column>

      <el-table-column
        prop="abnormalAddress"
        label="发生位置">
      </el-table-column>
      <el-table-column
        prop="abnormalType"
        label="异常现象">
      </el-table-column>
      <el-table-column
        prop="abnormalTime"
        label="发生时间">
      </el-table-column>
      <el-table-column
        prop="status"
        label="受理结果">
      </el-table-column>
<!--      <el-table-column-->
<!--        prop="orderFormList.length"-->
<!--        label="委托订单数量">-->
<!--        <template v-slot="scope" >-->
<!--          <el-button :disabled="scope.row.orderFormList === undefined" @click="getOrdersToShow(scope.row)" type="text" size="small">{{ scope.row.orderFormList === undefined ? 0 : scope.row.orderFormList.length }}</el-button>-->

<!--        </template>-->
<!--      </el-table-column>-->

    </el-table>
    <!--  运输记录分页-->
    <el-pagination
      v-if="seenException"
      @size-change="getException"
      @current-change="getException"
      :current-page.sync="exceptionForm.pageNum"
      :page-sizes="[5, 10, 15, 20, 60, 80, 100]"
      :page-size.sync="exceptionForm.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="exceptionFormTotal">
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "CarDetail",
  data() {
    return {
      //异常数据表格信息
      exceptionFormTotal:0,
      exceptionForm:{
        pageNum: 1,
        pageSize: 5,
        dispatchTicket:{}
      },
      tableDataForException:[],

      seenException:false,
      //默认不显示orders
      showOrder:false,
      //默认司机显示暂无
      seenDriver: false,
      //默认运输记录显示暂无
      seenDispatch: false,
      //运输记录分页查询
      queryForm: {
        carNumber: '',
        pageNum: 1,
        pageSize: 5
      },
      queryFormToGetOrders: {

        pageNum: 1,
        pageSize: 5
      },
      //运输记录表格数组
      tableData: [],
      tableDataForOrders:[],
      //运输记录分页total
      total: 0,
      //订单记录分页total
      orderTotal: 0,
      //车辆自增主键id
      carId: '',
      //car对象
      car: '',
      //car对应的司机
      driver: '',
      //car对应的调度单
      dispatch: '',
      //car对应的照片的base64的数组
      photos: []
    }
  },
  methods: {
    dispatchDetail(row){
      console.log(row)
      //根据调度单id查询车辆信息
      this.$axios({
        url: 'car/getCarByNumber',
        method: 'post',
        data: row
      }).then(res => {
        if (res.data.success) {

          this.$store.commit("carInfoToDispatchEdit",res.data.object)
          this.$store.commit("currentDispatchTicket",row)
          this.$router.push("dispatchDetail")

        }
      }).catch(err => {
        this.$message.error(err.message);
      })


    },
    jumpOrder(row){
      this.$store.commit('orderOperationType', 'checkOrder')
      this.$store.commit('currentOrder', row)
      this.$router.push('OrderOperate')
    },
    getOrderList() {
      this.$axios({
        url: 'order/form/list',
        method: 'post',
        data: this.queryFormToGetOrders
      }).then(res => {
        if (res.data.success) {
          this.tableDataForOrders = res.data.object.list;
          this.orderTotal = res.data.object.total;
        }
      }).catch(err => {
        this.$message.error(err.message);
      })
    },
    getOrdersToShow(row){
      console.log(row)
      this.showOrder=true
      this.getOrderList()
    },
    //根据car的id获取车辆和司机信息
    getCarAndDriver() {
      this.$axios({
        url: 'car/getCarAndDriver/' + this.carId,
        method: 'post',
      }).then(res => {
        if (res.data.success) {
          this.car = res.data.object.car;
          //对车辆是否有司机进行判断
          if (res.data.object.driver != undefined) {
            this.driver = res.data.object.driver;
            this.seenDriver = true
          }
          //对车辆是否有照片进行判断
          if (res.data.object.photos != undefined) {
            this.photos = res.data.object.photos;
          }
        }
      }).catch(err => {
        this.$message.error(err.message);
      })
    },
    //根据车牌号获取调度单信息，包含委托订单信息
    getDispatch() {
      this.$axios({
        url: 'car/getDispatch',
        method: 'post',
        data: this.queryForm
      }).then(res => {
        if (res.data.success) {
          //对车辆是否有调度单记录进行判断
          if (res.data.object.list != undefined) {
            this.tableData = res.data.object.list;
            this.total = res.data.object.total;
            this.seenDispatch = true

          }
        }
      }).catch(err => {
        this.$message.error(err.message);
      })
    },
    getException() {
      this.$axios({
        url: '/dispatch/abnormal/list',
        method: 'post',
        data:this.exceptionForm
      }).then(res => {
        if (res.data.success) {
          //对车辆是否异常进行判断
          if (res.data.object.list != undefined) {
            this.tableDataForException = res.data.object.list;
            this.exceptionFormTotal=res.data.object.total
            this.seenException = true
          }



        }
      }).catch(err => {
        this.$message.error(err.message);
      })
    },
    //获取车辆的主键id和业务主键车牌号number
    initInfo() {
      this.carId = this.$store.state.carDetail.id
      this.queryForm.carNumber = this.$store.state.carDetail.number
    //根据车牌号获取所有对应的调度单的异常记录
      this.exceptionForm.dispatchTicket.carNumber=this.$store.state.carDetail.number
    },
    //分页序号递增排序
    indexAdd(index) {
      const page = this.queryForm.pageNum // 当前页码
      const pageSize = this.queryForm.pageSize // 每页条数
      return index + 1 + (page - 1) * pageSize
    },
    indexOrders(index) {
      const page = this.queryFormToGetOrders.pageNum // 当前页码
      const pageSize = this.queryFormToGetOrders.pageSize // 每页条数
      return index + 1 + (page - 1) * pageSize
    },
    indexException(index) {
      const page = this.exceptionForm.pageNum // 当前页码
      const pageSize = this.exceptionForm.pageSize // 每页条数
      return index + 1 + (page - 1) * pageSize
    },
  },
  mounted() {
    this.getCarAndDriver()
    this.getDispatch()
    this.getException()
  },
  created() {
    // let url = 'ws://192.168.120.18:9090/loginLogSocket/' + this.$store.state.token;
    // loginLogSocket = new WebSocket(url);
    this.initInfo();
  },
  //动态显示图片信息
  computed: {
    src() {
      const src = []
      for (const ele of this.photos) {
        src.push('data:image/jpeg;base64,' + ele)
      }
      return src;
    }
  },
}
</script>

<style scoped>
#s{
  width:90%;
  margin:10px auto;
  background-color: #ffffff;
  box-shadow: 10px 10px 5px #c4c6c7;
  border-radius: 5px
}
.el-row {
  margin-bottom: 20px;

}
.el-input{
  width: 300px;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #FFFFFF;
}
.bg-purple {
  background: #FFFFFF;
}
.bg-purple-light {
  background: #FFFFFF;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #FFFFFF;
}

.titleOne{

  width: 100%;height: 50px;background: #339999;border-color: #339999;text-align: left;line-height:50px;color: #FFFFFF;
}
.titleTwo{
  margin-left: 30px;
  width: 90%;
}
</style>
